第 3 步 - 导出并使用 API 设置应用程序主题

在本教程的这一步骤中，您将学习导出已烘培主题（在 Car variant 主题组中定义）和非烘培主题（在 Cluster theme 主题组中定义）的 kzb 文件，并使用 Kanzi Engine API 让用户能在应用程序中更改非烘培主题。

导出 kzb 文件

在本节中，您将学习在 Kanzi Studio 工程中设置工程中主题的导出方式并导出主题。

本节介绍如何将 Cluster theme 主题组中定义的主题和 Car variant 主题组中定义的主题导出为主题包。主题 (Theme) 包是只包含所选主题 (Theme) 的资源的 kzb 文件。当目标设备上的存储空间或内存有限，但您又想在运行时更改应用程序主题，则可使用这种方法，避免加载额外的 kzb 文件。例如，通过这种方法，您可以从一个 Kanzi Studio 工程为两个汽车车型（Gasoline 和 Hybrid）创建应用程序，其中每个都有两个主题（Classic 和 Modern），二者可在应用程序中切换。

这只是从工程导出主题的其中一种方法。要查找最适合于您的产品和目标硬件的方法，请参阅导出主题 (Theme)。

要导出 kzb 文件：

  1. 从 预设件 (Prefabs) 拖动 Theme selector 预设件到 工程 (Project) 并将其放在 RootPage节点上。
    在下一节中，您将学习使用 Kanzi Engine API 创建能让用户更改应用程序主题的按钮。
  2. 在素材库 (Library) > 主题 (Theme)中选择 Car variant 主题组并在属性 (Properties) 中 设置：
  3. 在素材库 (Library) > 主题 (Theme) 中选择 Cluster theme 主题组，并在属性 (Properties) 中将选定主题 (Selected Theme) 属性设置为 Cluster theme/DefaultValues。
  4. 在素材库 (Library) > 主题 (Theme) 中双击 Cluster theme 主题组，在主题编辑器 (Theme Editor) 中打开它，并点击 Classic 和 Modern 主题旁的 。
    通过这种方式，您可以标记要导出主题资源的主题。启用主题 (Theme) 资源导出时，主题 (Theme) 列中的 图标变为蓝色，Kanzi Studio 导出主题 (Theme) 中使用的资源。
  5. 选择 文件 (File) > 导出 (Export) > 导出烘培的主题二进制 (Export Baked Theme Binaries) 并在 导出时要烘培主题和地区 (Themes and Locales to Bake on Export) 窗口中禁用 导出主 Kzb (Export Main Kzb) 设置。
    在 导出时要烘培主题和地区 (Themes and Locales to Bake on Export) 窗口中，您可以选择 Car variant 主题组中想要导出的已烘焙主题。
    点击导出 (Export)。

    Kanzi Studio：
  6. 在文本编辑器中：

添加代码以更改组合仪表主题

在本节中，您将学习添加应用程序代码，以Classic 主题启动应用程序，并创建添加到 Theme selector 2D 按钮 (Button 2D) 节点的消息处理程序，以在 Cluster theme 主题组中创建的两个主题之间切换。

要添加代码以更改组合仪表主题：

  1. 在 Visual Studio 中，为您的应用程序打开位于 Application/configs/platforms/win32 的 Visual Studio 解决方案。
    注

    如果您在 Visual Studio 2017 中打开教程解决方案，遇到提示您重新定位工程到最新的 Microsoft 工具集时，请点击取消 (Cancel)。

  2. 在 Theming 类中创建：
    class Theming : public ExampleApplication
{
    //描述主题的结构。
    struct ThemeDescriptor
    {
        explicit ThemeDescriptor(const string& name, const string& url): 
            m_name(name),
            m_url(url)
        {
        }

        //主题名称。
        string m_name;
        //主题的 kzb 文件 URL。
        string m_url;
    };

    //所有主题描述的集合。
    vector<ThemeDescriptor> m_themes;

    //当前活动主题的索引。
    int m_activeThemeIndex;

    //要加载的已烘培主题名称。
    static const string m_carVariant;

...

}
  3. 在 Theming 类使用在上一步骤中创建的 m_carVariant 车型后，设置要在应用程序启动时加载的汽车车型。
    //选择要使用的已烘培主题。
//要启动Hybrid 汽车车型应用程序，设置为 0。
//要启动Gasoline 汽车车型应用程序，设置为 1。
#if 1
const string Theming::m_carVariant = "Gasoline";
#else
const string Theming::m_carVariant = "Hybrid";
#endif
  4. 在 onConfigure() 函数中，使用导出 kzb 文件时 Kanzi Studio 创建的 .kzb.cfg 文件，为应用程序加载能在上一步骤中设置的已烘培主题。
        virtual void onConfigure(ApplicationProperties& configuration) KZ_OVERRIDE
    {
        configuration.binaryName = "./Car variant=" + m_carVariant + "/theming.kzb.cfg";
        configuration.defaultWindowProperties.width = 1920;
        configuration.defaultWindowProperties.height = 720;
    }
  5. 在 onProjectLoaded() 函数中
        virtual void onProjectLoaded() KZ_OVERRIDE
    {
        //为所有主题添加名称和 URL。
        m_themes.push_back(ThemeDescriptor("Classic", "kzb://theming/Themes/Cluster theme/Classic"));
        m_themes.push_back(ThemeDescriptor("Modern", "kzb://theming/Themes/Cluster theme/Modern"));

        //从包含主题资源的所有 kzb 文件加载元数据。
        ResourceManager* resourceManager = getResourceManager();
        resourceManager->addKzbFile("./Car variant=" + m_carVariant + "/Theme_packs/Cluster theme=Classic.kzb");
        resourceManager->addKzbFile("./Car variant=" + m_carVariant + "/Theme_packs/Cluster theme=Modern.kzb");

        //应用程序启动时激活第一个主题。
        m_activeThemeIndex = -1;
        changeToNextTheme();
    }
  6. 在 onProjectLoaded() 函数后创建一个用于激活应用程序中下一个主题的函数。
        //激活下一个主题。
    void changeToNextTheme()
    {
        //获取 Theme selector 2D 按钮 (Button 2D) 节点中的 2D 文本块 (Text Block 2D) 节点，以便能更改文本，以显示下一个主题的名称。
        Button2DSharedPtr themeSelectorButton = getRoot()->lookupNode<Button2D>("Theme selector");
        TextBlock2DSharedPtr selectorThemeTextBlock = themeSelectorButton->lookupNode<TextBlock2D>("#Next theme name");

        //获取下一个主题及其后一个主题的描述。
        const int nextThemeIndex = (m_activeThemeIndex + 1) % m_themes.size();
        const int followingThemeIndex = (m_activeThemeIndex + 2) % m_themes.size();
        const ThemeDescriptor& nextTheme = m_themes.at(nextThemeIndex);
        const ThemeDescriptor& followingTheme = m_themes.at(followingThemeIndex);

        //设置后一个主题的名称。
        selectorThemeTextBlock->setText(followingTheme.m_name);

        //将应用程序主题设置为下一个主题。
        getScreen()->activateTheme(nextTheme.m_url);
        m_activeThemeIndex = nextThemeIndex;
    }
  7. 在 Theming 类中的 onProjectLoaded() 函数后，创建 onChangeThemeButtonClicked 事件处理程序，其中可定义当用户点击应用程序中的Theme selector 按钮时应用程序如何作出反应。
        //消息处理程序定义当用户点击应用程序中的 Theme selector 按钮时应用程序如何作出反应。
    void onChangeThemeButtonClicked(ButtonConcept::ClickedMessageArguments& /* messageArguments */)
    {
        changeToNextTheme();
    }
  8. 在 onProjectLoaded() 函数中，从主题 kzb 文件加载源数据后，将上一步中创建的消息处理程序添加到Theme selector 节点。
        virtual void onProjectLoaded() KZ_OVERRIDE
    {

    ...

        //为 Theme selector 节点使用的 按钮: 点击 (Button:Click) 消息注册消息处理程序。
        Button2DSharedPtr themeSelectorButton = getRoot()->lookupNode<Button2D>("Theme selector");
        themeSelectorButton->addMessageHandler(ButtonConcept::ClickedMessage, bind(&Theming::onChangeThemeButtonClicked, this, placeholders::_1));

    ...

    }
  9. 在 Visual Studio 中，为您的 Visual Studio 版本选择一个解决方案配置并运行应用程序。
    例如，如果您仍在开发应用程序，选择GL_vs2015_Debug 配置。要创建 Kanzi 应用程序的产品版本，选择一个可用的发布配置。

在应用程序中，当您点击Theme selector 按钮，可在Cluster theme 主题组中定义的Classic 和Modern 组合仪表主题之间切换。


< 上一步

接下来该做什么？

在本教程中，您学习了如何为 Kanzi 应用程序设置主题，以为相同的应用程序创建不同的外观，以及如何将一个 Kanzi Studio 工程用于产品的多个车型。要进一步学习本教程，您可以为其他组合仪表主题和汽车车型创建资产。您还可以：

另请参阅

要详细了解如何为您的 Kanzi 应用程序创建主题，请参阅为应用程序制定主题。

要详细了解从您的 Kanzi Studio 工程导出主题的不同选项，请参阅导出主题 (Theme)。

要了解如何创建和使用样式，请参阅 使用样式。

要详细了解有关如何使用 Kanzi 应用程序中状态机的信息，请参阅教程：使用状态机控制您的应用程序和使用状态机。

要详细了解预设件占位符 (Prefab Placeholder) 和预设件视图 (Prefab View) 节点及其用法的信息，请参阅使用预设件。

打开导航